<template>
<div class="container">
  <div class="order">
    <div class="top-bar">
      {{orderInfo.productName}}
      <span class="tag unpay" v-if="orderInfo.orderStatus==0">待支付</span>
      <span class="tag effect" v-if="orderInfo.orderStatus==1">已生效</span>
      <span class="tag outdeal" v-if="orderInfo.orderStatus==3">已解约</span>
      <span class="tag outdeal" v-if="orderInfo.orderStatus==5">已到期</span>
      <!-- 已生效:effect
      已解约:outdeal -->
    </div>
    <div class="middle flex">
      <div class="m-l">
        <img src="orderInfo.logoUrl" :onerror="defaultImg" alt="">
      </div>
      <div class="m-r flex-1" v-text="orderInfo.productInfo">
      </div>
    </div>
    <div class="bottom">
      <div class="b-l">产品编号：{{orderInfo.productNumber}}</div>
      <div class="b-r" v-text="orderInfo.priceType">2980/年</div>
    </div>
  </div>

  <div class="lists-wrap">
    <div class="list-bar">
      <div class="l-bar-l">订单编号</div>
      <div class="l-bar-r" v-text="orderInfo.orderSn"></div>
    </div>
    <div class="list-bar">
      <div class="l-bar-l">专属投顾</div>
      <div class="l-bar-r" v-text="orderInfo.adviserName"></div>
    </div>
    <div class="list-bar">
      <div class="l-bar-l">签约时间</div>
      <div class="l-bar-r" v-text="orderInfo.signDate"></div>
    </div>
    <div class="list-bar" v-if="orderInfo.expireDate">
      <div class="l-bar-l">到期时间</div>
      <div class="l-bar-r" v-text="orderInfo.expireDate"></div>
    </div>
    <!-- <div class="list-bar">
      <div class="l-bar-l">解约时间</div>
      <div class="l-bar-r">2016-06-27 17:15:05</div>
    </div> -->
  </div>

  <!-- 接收方式 -->
  <div class="receive-way">
    <div class="receive-wrap">
      <div class="receive-l">
        <span>接收方式</span>
      </div>
      <div class="receive-r">
        <router-link :to="{path:'/Modify',query:{orderId:$route.query.orderId,mobile:orderInfo.mobile,email:orderInfo.email}}" >修改</router-link>
      </div>
    </div>
    <div class="receive-wrap">
      <div class="receive-l">
        <span>手机短信</span>
      </div>
      <div class="receive-r">
        <span id="tel" v-text="orderInfo.mobile"></span>

      </div>
    </div>
    <div class="receive-wrap">
      <div class="receive-l">
        <span>邮箱</span>
      </div>
      <div class="receive-r">
        <span id="mail" v-text="orderInfo.email"></span>
      </div>
    </div>

    <div class="footer">
      <div class="btns-wrap">
        <a href="javascript:;" class="outdeal">
          解约
        </a>
        <a href="javascript:;" class="buy">
          续期
        </a>
        <!-- <a href="javascript:;" class="resign">
          重新签约
        </a> -->
      </div>
    </div>


  </div>
  
  


</div>

</template>

<script>
import Api from '@/service';
import Tip from '@/tools';
export default {
  name: 'OrderDetail',
  data () {
    return {
      defaultImg: Tip.tips.res.defaultImg,
      orderInfo: {}

    }
  },
  methods: {
    initOrderDetail(){
      let _self = this;
      // .$route.query.productId
      Api.sm.initOrderDetail(29410,"7dqj7l4DUDgaAI2ysfZiXoeZlxXZZyRoE5Z0j1moya0*").then(response => {
        // console.log(response)
        _self.orderInfo = response.data.info;
        console.log(_self.orderInfo)

      });
    }
  },
  created: function(){
    this.initOrderDetail();
  }
}
</script>

<style lang="scss" scoped type="text/css">
@import  "../assets/scss/reset";
.container{
  width: 100%;
  overflow: hidden;
  padding-bottom: calculateRem(62px);
  .order{
    background: white;
    padding: 0 calculateRem(16px);
    margin-bottom: calculateRem(10px);
    .top-bar{
      position: relative;
      width: 100%;
      height: calculateRem(50px);
      line-height: calculateRem(50px);
      box-sizing: border-box;
      border-bottom: 1px solid #D8D8D8;
      font-size: calculateRem(16px);
      color: black;
      padding-right: calculateRem(50px);
      @include ell;
      .tag{
        display: inline-block;
        width: calculateRem(48px);
        height: calculateRem(22px);
        line-height: calculateRem(20px);
        box-sizing: border-box;
        text-align: center;
        font-size: calculateRem(12px);
        border-radius: 3px;
        position: absolute;
        right: 0;
        top: calculateRem(14px);
      }
      .unpay{
        color: #FF703A;
        border: 1px solid #FF703A;
      }
      .effect{
        color: #2F9AD8;
        border: 1px solid #2F9AD8;
      }
      .outdeal{
        color: #999;
        border: 1px solid #999;
      }
    }
    .middle{
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding: calculateRem(16px) 0;
      .m-l{
        width: calculateRem(40px);
        height: calculateRem(40px);
        margin-right: calculateRem(14px);
        >img{
          width: 100%;
          height: 100%;
        }

      }
      .m-r{ 
        height: calculateRem(40px);
        max-width: 83%;
        line-height: calculateRem(20px);
        @include mulell(2);
        overflow: hidden;
        font-size: calculateRem(14px);
        color: #4B4B4B;

      }
    }
    .bottom{
      width: 100%;
      height: calculateRem(46px);
      line-height: calculateRem(46px);
      box-sizing: border-box;
      border-top: 1px solid #d8d8d8;
      font-size: calculateRem(15px);
      color: #4B4B4B;
      .b-l{
        width: 70%;
        height: calculateRem(46px);
        float: left;
        @include ell;
      }
      .b-r{
        width: 30%;
        height: calculateRem(46px);
        float: right;
        text-align: right;
        @include ell;
      }
    }
  }

  .lists-wrap{
    width: 100%;
    height: auto;
    background: white;
    padding: 0 calculateRem(16px);
    margin-top: calculateRem(10px);
    box-sizing: border-box;
    .list-bar{
      width: 100%;
      height: calculateRem(40px);
      box-sizing: border-box;
      border-bottom: 1px solid #F5F8FA;
      line-height: calculateRem(40px);
      .l-bar-l{
        width: 26%;
        float: left;
        height: calculateRem(40px);
        font-size: calculateRem(15px);
        color: #4A5359;
      }
      .l-bar-r{
        width: 74%;
        float: right;
        text-align: right;
        height: calculateRem(40px);
        font-size: calculateRem(16px);
        color: #000F19;
        @include ell;

      }
    }
    .auto{
      height: auto;
      min-height: calculateRem(40px);
      &:after{
        display: block;
        content: '';
        clear: both;
      }
      .l-bar-l{
        float: left;
      }
      .l-bar-r{
        height: auto;
        min-height: calculateRem(40px);
        float: right;
        .line1{
          font-size: calculateRem(16px);
          line-height: calculateRem(20px);
          margin-top: calculateRem(8px);
        }
        .line2{
          color: #E62622;
          line-height: calculateRem(20px);
          margin-bottom: calculateRem(8px);
        }
      }
    }
  }

  .receive-way{
    width: 100%;
    height: auto;
    /*background: white;*/
    margin-top: calculateRem(12px);
    box-sizing: border-box;
    /*padding: 0 calculateRem(16px);*/
    .receive-wrap{
      width: 100%;
      height: calculateRem(50px);
      line-height: calculateRem(50px);
      box-sizing: border-box;
      border-bottom: 1px solid #F5F8FA;
      background: white;
      padding: 0 calculateRem(16px);
      box-sizing: border-box;
      .receive-l{
        width: 40%;
        height: calculateRem(50px);
        float: left;
        >span{
          font-size: calculateRem(16px);
          color: #4A5359;
        }
        
      }
      .receive-r{
        width: 60%;
        height: calculateRem(50px);
        line-height: calculateRem(50px);
        float: right;
        text-align: right;
        @include ell;
        >span{
          font-size: calculateRem(16px);
          color: #4B4B4B;
        }


      }

      &:first-child{
        height: calculateRem(30px);
        line-height: calculateRem(30px);
        background: #F5F8FA;
        .receive-l{
          height: calculateRem(30px);
          line-height: calculateRem(30px);
          >span{
            color: #999;
          }
        }
        .receive-r{
          height: calculateRem(30px);
          line-height: calculateRem(30px);
          >a{
            color: #4B4B4B;
            font-size: calculateRem(16px);
            &:after{
              content: '';
              display: inline-block;
              width: calculateRem(8px);
              height: calculateRem(16px);
              vertical-align: -2px;
              background: url('../assets/images/affirm_right_arrow_icon.png') no-repeat;
              background-size: 100% 100%;
              margin-left: calculateRem(6px);
            }

          }
        }
      }
    }
    /*.title-reset{
      height: calculateRem(30px);
      line-height: calculateRem(30px);
      background: #F5F8FA;
    }*/
  }

  .footer{
    width: 100%;
    height: calculateRem(60px);
    position: fixed;
    z-index: 100;
    bottom: 0;
    left: 0;
    right: 0;
    background: #F5F8FA;
    .btns-wrap{
      position: absolute;
      height: calculateRem(50px);
      left: calculateRem(10px);
      right: calculateRem(10px);
      bottom: calculateRem(5px);
      >a{
        display: block;
        height: calculateRem(50px);
        font-size: calculateRem(20px);
        color: #FFFFFF;
        text-align: center;
        line-height: calculateRem(50px);
        outline: none;
        border-radius: calculateRem(5px);
        font-weight: bold;
      }
      .outdeal{
        background: #D8E5F5;
        width: 35%;
        color: #666;
        float: left;
        &:active{
          background: #e4ebf3;
        }
      }
      .buy{
        background: #E62622;
        width: 63%;
        float: right;
        color: white;
        &:active{
          background: #C51B0D;
        }
      }
      .resign{
        height: calculateRem(50px);
        border-radius: calculateRem(5px);
        color: white;
        font-size: calculateRem(20px);
        background: #E62622;
        font-weight: bold;
        &:active{
          background: #C51B0D;
        }
      }
    }
  }

}

</style>
